<template>
    <div>
        <div class="my-info">
            <div class="info-block my-base-info">
                <div class="x-row">
                    <div class="x-col-8">
                        <div class="info-avatar" @click="changeMyAvatar">
                            <img :src="userInfo.avatarUrl ? userInfo.avatarUrl : img.myDatum">
                        </div>
                        <div class="my-info-name color-dark">
                            {{userInfo.realName}}
                        </div>
                    </div>
                    <div class="x-col-4">
                        <div class="my-info-setting color-default text-right"><span @click="goSettingPage">个人设置</span></div>
                    </div>
                </div>
            </div>
            <div class="info-block my-task">
                <div class="info-title">我的任务</div>
                <div class="my-task-list">
                    <div class="my-task-item" @click="!taskInfo.course && chooseMyCourse()">
                        <div class="img"><img :src="taskInfo.course ? img.task : img.undoTask"></div>
                        <div class="text color-default">选择必修课</div>
                    </div>
                    <div class="my-task-item" @click="!taskInfo.info && completeInfo()">
                        <div class="img"><img :src="taskInfo.info ? img.task : img.undoTask"></div>
                        <div class="text color-default">完善资料</div>
                    </div>
                    <div class="my-task-item" @click="!taskInfo.exam && startExam()">
                        <div class="img"><img :src="taskInfo.exam ? img.task : img.undoTask"></div>
                        <div class="text color-default">在线考试</div>
                    </div>
                    <div class="my-task-item" @click="!taskInfo.school && chooseSchool()">
                        <div class="img"><img :src="taskInfo.school ? img.task : img.undoTask"></div>
                        <div class="text color-default">选择学校</div>
                    </div>
                    <div class="my-task-item">
                        <div class="img"><img :src="taskInfo.exercise ? img.task : img.undoTask"></div>
                        <div class="text color-default">实操培训</div>
                    </div>
                </div>
            </div>
            <div class="info-block my-course">
                <div class="info-title">我的必修课</div>
                <!-- <div class="my-simple-button" @click="chooseMyCourse" v-if="!taskInfo.course || !myCourse">
                    选择必修课
                </div> -->
                <div class="my-img-button" @click="chooseMyCourse" v-if="!taskInfo.course || !myCourse">
                    <div class="img"><img :src="img.myCourse"></div>
                    <div class="text color-default">选择我的必修课</div>
                </div>
                <div class="common-info text-left" v-else>
                    <table>
                        <tr>
                            <td class="common-cover" rowspan="4">
                                <img :src="myCourse.coverurl">
                            </td>
                            <td class="common-title color-dark" colspan="2">{{myCourse.title}}</td>
                        </tr>
                        <tr>
                            <td class="common-content color-dark-gray" colspan="2">
                                <div :class="{'display-hide': !!courseDisplayInfo['1']}" v-clampy="4" @click="handleDisplay(courseDisplayInfo, '1')" v-if="!!myCourse.contentsummary">{{myCourse.contentsummary}}</div>
                                <div :class="{'display-hide': !courseDisplayInfo['1']}" @click="handleDisplay(courseDisplayInfo, '1')">{{myCourse.contentsummary}}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="text">
                                <span v-show="myCourse.teacher">主讲人:{{myCourse.teacher}}</span>
                                <span v-show="myCourse.duration">{{myCourse.duration}}课时</span>
                            </td>
                            <td class="common-button">
                                <mt-button type="primary" class="bg-orange" style="font-size: 13px" @click="goCourseInfoPage(myCourse.courseid, myCourse.stage)">
                                    {{myCourse.stagetxt || '开始学习'}}
                                </mt-button>
                            </td>
                        </tr>
                        <!-- <tr>
                            <td class="text color-orange">
                                <span v-show="myCourse.begintime">开课时间: {{myCourse.begintime | dateformat('YYYY-MM-DD')}}</span>
                            </td>
                        </tr> -->
                    </table>
                </div>
            </div>
            <div class="info-block my-course">
                <div class="info-title">我的选修课</div>
                <!-- <div class="my-simple-button" @click="chooseMyCourse" v-if="!myCourse2">
                    选择选修课
                </div> -->
                <div class="my-img-button" @click="chooseMyCourse" v-if="!myCourse2">
                    <div class="img"><img :src="img.myCourse"></div>
                    <div class="text color-default">选择我的选修课</div>
                </div>
                <div class="common-info text-left" v-else>
                    <table>
                        <tr>
                            <td class="common-cover" rowspan="4">
                                <img :src="myCourse2.coverurl">
                            </td>
                            <td class="common-title color-dark" colspan="2">{{myCourse2.title}}</td>
                        </tr>
                        <tr>
                            <td class="common-content color-dark-gray" colspan="2">
                                <div :class="{'display-hide': !!courseDisplayInfo['2']}" v-clampy="4" @click="handleDisplay(courseDisplayInfo, '2')" v-if="!!myCourse2.contentsummary">{{myCourse2.contentsummary}}</div>
                                <div :class="{'display-hide': !courseDisplayInfo['2']}" @click="handleDisplay(courseDisplayInfo, '2')">{{myCourse2.contentsummary}}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="text">
                                <span v-show="myCourse2.teacher">主讲人:{{myCourse2.teacher}}</span>
                                <span v-show="myCourse2.duration">{{myCourse2.duration}}课时</span>
                            </td>
                            <td class="common-button">
                                <mt-button type="primary" class="bg-orange" style="font-size: 13px" @click="goCourseInfoPage(myCourse2.courseid, myCourse2.stage, true)">
                                    {{myCourse2.stage | stageText(myCourse2.stagetxt)}}
                                </mt-button>
                            </td>
                        </tr>
                        <!-- <tr>
                            <td class="text color-orange">
                                <span v-show="myCourse2.begintime">开课时间: {{myCourse2.begintime | dateformat('YYYY-MM-DD')}}</span>
                            </td>
                        </tr> -->
                    </table>
                </div>
            </div>
            <div class="info-block my-datum">
                <div class="info-title">完善资料</div>
                <div class="my-img-button" @click="completeInfo()">
                    <div class="img"><img :src="img.myDatum"></div>
                    <div class="text color-default">完善我的资料</div>
                </div>
            </div>
            <div class="info-block my-school">
                <div class="info-title">选择学校</div>
                <!-- <div class="my-simple-button" @click="chooseSchool()" v-if="!mySchool || !mySchool.schoolid">
                    选择学校
                </div> -->
                <div class="my-img-button" @click="chooseSchool()" v-if="!mySchool || !mySchool.schoolid">
                    <div class="img"><img :src="img.mySchool"></div>
                    <div class="text color-default">选择我的学校</div>
                </div>
                <div class="common-info text-left" v-else>
                    <table>
                        <tr>
                            <td class="common-cover" rowspan="2">
                                <img :src="mySchool.introimageurl">
                            </td>
                            <td class="common-title color-dark">{{mySchool.name}}</td>
                        </tr>
                        <tr>
                            <td class="common-content color-dark-gray">
                                {{mySchool.contact | emptyText('联系人：')}}<br />
                                {{mySchool.contactno | emptyText('联系固话：')}}<br />
                                {{mySchool.contactmobile | emptyText('联系手机：')}}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="info-block my-school">
                <div class="info-title">考勤打卡</div>
                <div class="my-img-button" @click="punchCard()">
                    <div class="img"><img :src="img.mySignin"></div>
                    <div class="text color-default">考勤打卡</div>
                </div>
            </div>
        </div>

        <footer-nav></footer-nav>
    </div>
</template>
<script>
import footerNav from '@/components/footer/footer'
import undoTaskImg from '@/assets/images/personal/个人中心_任务_未选.png'
import taskImg from '@/assets/images/personal/个人中心_任务_已选.png'
import myDatumImg from '@/assets/images/personal/个人中心_完善资料_头像.png'
import myCourseImg from '@/assets/images/personal/个人中心_必修课.png'
import myExamImg from '@/assets/images/personal/个人中心_考试.png'
import mySchoolImg from '@/assets/images/personal/个人中心_学校.png'
import mySigninImg from '@/assets/images/personal/个人中心_考勤.png'

import { MessageBox, Toast } from 'mint-ui'
import { Const } from '@/consts'
import userApi from '@/api/user'
import indexApi from '@/api/index'
import utils from '@/utils'

export default {
    data () {
        return {
            img: {
                undoTask: undoTaskImg,
                task: taskImg,
                myDatum: myDatumImg,
                myCourse: myCourseImg,
                myExam: myExamImg,
                mySchool: mySchoolImg,
                mySignin: mySigninImg
            },
            myCourse: null,
            myCourse2: null,
            userInfo: {},
            myProgress: 0,
            mySchool: {},

            courseDisplayInfo: {
                '1': false,
                '2': false
            }
        }
    },

    components: {
        footerNav
    },

    computed: {
        taskInfo () {
            return {
                course: this.myProgress >= 1,
                info: this.myProgress >= 2,
                exam: this.myProgress >= 3,
                school: this.myProgress >= 4,
                exercise: this.myProgress >= 5
            }
        }
    },

    created () {
        // this.userInfo = utils.get('USER_INFO') || {};
        this.getUserInfo();
        this.getInfoDetail();
        // this.getMyCourse();
        // this.getMyProgress();
    },

    filters: {
        emptyText (value, extra) {
            return value ? ((extra || '') + (value || '')) : ''
        },

        stageText (value, defaultValue) {

            if (!value) {
                return '开始学习'
            }

            if (/EXAMINATION|PRACTICAL|PARTICIPATION|FINALSCORE/.test(value)) {
                return '课程完成'
            }

            return defaultValue
        }
    },

    methods: {
        goSettingPage () {
            this.$router.push('/personal/setting');
        },
        goCourseInfoPage (courseId, stage, isMinor) {

            if (stage === 'EXAMINATION' && !isMinor) {

                if (this.myProgress < 2) {
                    Toast('请先完善资料')
                    return
                }

                // 开始考试
                MessageBox.confirm('<div style="height:100px;line-height:100px">是否开始考试?</div>').then(action => {
                    this.$router.push({ path: '/exam/start', query: { courseId: courseId, from: 'personal' } })
                })

                // } else if (stage === 'PRACTICAL') {
                //     // 实训报名
                // } else if (stage === 'PARTICIPATION') {
                //     // 参与实训
                // } else if (stage === 'FINALSCORE') {
                //     // 最终成绩
            } else {
                this.$router.push({ path: '/index/courseInfo', query: { courseid: courseId, from: 'personal' } });
            }


        },

        processMyProgress (stage) {

            switch (stage + '') {
                case 'SIGNUP':
                    this.myProgress = 0;
                    break;
                case 'CONTINUE':
                    this.myProgress = 1;
                    break;
                case 'COMPLETE':
                    this.myProgress = 1;
                    break;
                case 'EXAMINATION':
                    this.myProgress = 2;
                    break;
                case 'PRACTICAL':
                    this.myProgress = 3;
                    break;
                case 'PARTICIPATION':
                    this.myProgress = 4;
                    break;
                case 'FINALSCORE':
                    this.myProgress = 4;
                    break;
                case 'GRADUATION':
                    this.myProgress = 5;
                    break;
                default:
                    this.myProgress = 0;
                    break;
            }
        },

        getMyProgress () {
            userApi.getMyProgress().then(resp => {
                const result = resp[Const.RESP_RESULT] || {};
                this.processMyProgress(result.stage)
            }).catch(resp => {
                // Toast(resp[Const.RESP_MESSAGE]);
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        getUserInfo () {

            // let userInfo = utils.get('USER_INFO')
            // if (userInfo && userInfo.username) {
            //     this.userInfo = userInfo
            //     return
            // }

            userApi.getUserInfo().then((resp) => {
                const result = resp[Const.RESP_RESULT] || {};
                this.userInfo = {
                    username: result.username,
                    phoneNo: result.phoneno,
                    realName: result.realname,
                    idCardNo: result.idcardno,
                    avatarUrl: result.avatarurl,
                    lastLoginTime: result.lastlogintime
                };

                utils.save('USER_INFO', this.userInfo);
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE]);
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        getInfoDetail () {
            userApi.getInfoDetail().then((resp) => {
                const result = resp[Const.RESP_RESULT] || {}

                // 必修课
                this.myCourse = (result.mycourse || []).filter(t => t['coursetype'] == 'PROFESSIONAL')[0]
                utils.save('USER_COURSE', this.myCourse);

                // 选修课
                this.myCourse2 = (result.mycourse || []).filter(t => t['coursetype'] == 'PUBLIC')[0]

                utils.save('USER_COURSE2', this.myCourse2);
                // 进度
                this.processMyProgress((result.mystatus || {}).stage)
                // 学校
                this.mySchool = result.myschool || {}
                utils.save('USER_SCHOOL', this.mySchool);
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE]);
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        getMyCourse () {

            let course = utils.get('USER_COURSE')
            if (course && course.title) {
                this.myCourse = course
                return
            }

            indexApi.getMyCourseList({
                params: {
                    coursetype: 'PROFESSIONAL'
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT] || [];
                this.myCourse = result.filter(t => t['coursetype'] == 'PROFESSIONAL')[0];
                utils.save('USER_COURSE', this.myCourse);
            }).catch((resp) => {
                // Toast(resp[Const.RESP_MESSAGE]);
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },

        chooseMyCourse () {
            this.$router.push('/index?public=true&to=public');
        },

        completeInfo () {

            const msgText = '<div class="text-justify" style="line-height: 25px;">该信息将用于在通过考试后、报考学校时生成纸质报名表，若信息不符可能导致报名失败，请您依照真实情况填写。<div>'

            MessageBox.confirm(msgText, '温馨提示', {
                confirmButtonText: '我已知晓',
                cancelButtonText: '我要再考虑一下',
                closeOnClickModal: false,
                type: 'info'
            }).then(action => {
                //
                this.$router.push({
                    path: '/personal/setting/complete',
                    query: {
                        from: 'personal'
                    }
                });
            }).catch(() => {

            })
        },

        startExam () {

            if (this.myProgress < 2) {
                Toast('请先完善资料')
                return
            }

            if (!this.myCourse || this.myCourse.stage != 'EXAMINATION') {
                Toast('您现在不能考试')
            }
        },

        changeMyAvatar () {
            this.$router.push({ path: '/personal/setting/account', query: { from: 'personal' } });
        },

        chooseSchool () {

            if (this.myCourse && this.myProgress >= 3) {
                this.$router.push({
                    path: '/personal/school/list',
                    query: {
                        order: '0'
                    }
                })
            } else {
                Toast('您现在还不能选择学校')
            }
        },

        punchCard () {
            if (this.mySchool && this.mySchool.schoolid) {
                this.$router.push({
                    path: '/personal/school/punchcard',
                    schoolId: this.mySchool.schoolid
                })
            } else {
                Toast('您还没有选择学校')
            }
        },

        toggleCollapse () {
            //     let target = $event.target;
            //     let className = target.className || ''

            //     let classList = className.split(/\s+/)

            //     if (classList.indexOf('clamp-text') != -1) {
            //         target.className = target.className.replace('clamp-text', '').trim()
            //     } else if (classList.length) {
            //         target.className += ' clamp-text'
            //     } else if (!classList.length) {
            //         target.className = 'clamp-text'
            //     }
        },

        handleDisplay (source, index) {
            source[index] = !source[index]
        }
    }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$offset-y: 16px;
$scale: 1.2;
.my-info {
  padding: 0 $offset-x;
  padding-bottom: 70px;

  .info-block {
    border-bottom: 1px solid #e0e0e0;
    padding: 18px 0 24px 0;
    box-sizing: border-box;

    .info-title {
      color: #666666;
      font-size: 14px * $scale;
      text-align: left;
    }
  }

  .info-block:last-child {
    border-bottom: none;
  }

  .my-base-info {
    $base-height: 50px;
    height: 90px;
    .info-avatar {
      width: $base-height;
      height: $base-height;
      overflow: hidden;
      float: left;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .my-info-name {
      float: left;
      line-height: $base-height;
      margin-left: $offset-x;
      font-size: 16px * $scale;
    }

    .my-info-setting {
      line-height: $base-height;
      font-size: 14px * $scale;

      span {
        padding: 10px;
      }
    }
  }

  // my stask
  .my-task {
    $task-count: 5;
    .my-task-list {
      height: 65px;
      margin-top: $offset-y;
      .my-task-item {
        width: 100% / $task-count;
        float: left;

        .img {
          img {
            width: 30px;
            height: 30px;
          }
        }

        .text {
          margin-top: 12px;
          font-size: 11px * $scale;
        }
      }
    }
  }

  .common-info {
    table {
      width: 100%;
      padding: 0;
      margin: 0;
      border: none;
      tr,
      td {
        border: none;
      }
    }

    .common-cover {
      width: 86px;
      height: 96px;
      padding: 0;
      overflow: hidden;

      img {
        width: 86px;
        height: 96px;
      }
    }

    .common-title {
      font-size: 15px * $scale;
      padding-left: 16px;
    }

    .common-content {
      font-size: 12px * $scale;
      padding-left: 16px;

      // .clamp-text {
      //     overflow: hidden;
      //     -webkit-line-clamp: 3;
      //     text-overflow: ellipsis;
      //     display: -webkit-box;
      //     -webkit-box-orient: vertical;
      // }
    }

    .text {
      padding-left: 16px;
      font-size: 14px;
    }

    td.common-button {
      width: 77px;
      max-width: 77px;
      padding: 0;
      margin: 0;
      border: none;
    }
  }

  // my-datum
  .my-img-button {
    .img {
      img {
        width: 60px;
        height: 60px;
        // border-radius: 50%;
      }
    }

    .text {
      margin-top: 12px;
      font-size: 12px * $scale;
    }
  }

  .my-simple-button {
    $color: #1f88fe;

    display: inline-block;
    margin-top: $offset-y;
    width: 140px;
    padding: 16px 0;
    border: 1px solid $color;
    border-radius: 5px;
    color: $color;
    font-size: 12.5px * $scale;
  }
}
</style>
